<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		vue中的单向数据流：
		
		父组件可以直接向子组件传递参数，但是，子组件不能直接向父组件传递参数，
		这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。
		
		
		1. 父组件---》子组件  传递数据
		
		父组件自定属性
		<Coma name="lili" :age="age"></Coma>
		
		子组件通过props来接收,传递过来的内容是只读
		props:["name","age"] 数组接收---不需要校验
		
		props:{//格式校验 ****
			name:{
				type:String,//数据类型
				required:true,//不能为空
				default:"Tom"//默认值
			},
			ageA:{
				type:[Number,String],
				required:true,
				validator:function(value){
					return value > 10;
				}
			}
		}
		
		2. 子组件---》父组件  传递数据  (基于发布订阅)
		
		父组件自定义一个事件 <Comb @myEvent="get"></Comb>
		
		methods:{
			  get(val){
				console.log(val); //可以接收传递过来的参数
			  }
		}
		
		子组件（$emit)执行自定义事件，顺便传递参数
		
		this.$emit("myEvent",this.child);
		
		3.组件之间相互传参(父子，兄弟)----发布订阅($emit,$on)--要共用一个事件池
		
		main.js
		
		var EventBus=new Vue();//创建1个新的实例，（实例身上有事件池）
		Vue.prototype.$bus=EventBus;//把这个实例挂在到Vue.prototype，每个组件都可以使用
		
		Comc 组件 点击按钮传递参数
		
		<button @click="send">传递数据</button>
		
		send(){//执行事件池里的方法，传递参数 
			this.$bus.$emit("myget",this.msg);
		}
		
		Comd 接收参数
		
		//通过$on，往事件池里(同一个)，添加方法
		this.$bus.$on("myget",(val)=>{
			console.log(val);//val函数执行后，接收的参数
		})
		
		4.祖先----》后代  传递数据（了解）
		
		祖先：
		provide(){//祖先
			return{
				Parentmsg:this.Parentmsg,//传递的参数
				obj:this.obj//参数是对象
			}
		}
		
		后代：
		inject:["Parentmsg","obj"]
		//接收普通值的参数---失去了响应式功能(没了get,set)
		//参数是对象，对象失去响应式，对象里面的值没有失去响应式
		
		5.使用 vue实例属性  通信
		$parent 获取父组件属性和方法  beforeCreate created beforeMount  mounted
		$children 获取子组件属性和方法  mounted 在这个钩子里获取
		$root 获取根组件属性和方法 （根--》main.js 文件里的）
		$refs 获取具体子组件属性和方法  （作用一,标签组件标签）
		      获取DOM (作用二,标签普通标签)
			  
		6.vuex
	</body>
	
	<script>
		组件的相关知识
		1. 直接在 "组件标签" 上绑定的事件是无法执行的
		需要添加修饰符 .native===>事件就可以执行
		
		<Comd @click.native="show"></Comd>
		
		methods:{
			  show(){
				  alert("1111");
			  }
		}
		
		2.组件切换(动态组件) component标签 + is属性
		
		<button @click="flag='Come'">切换组件Come</button>
		<button @click="flag='Comf'">切换组件Comf</button>
		<component :is="flag"></component>
		
		data(){
			  return{
				flag:"Come"
			  }
		}
		
		3.组件实例方法
		1. $mount() 挂载
		2. $set(要修改的数据,属性名/下标,属性值)  对象、数组   任何时候添加属性都可以
		3. $delete(要修改的数据,属性名/下标)  对象、数组   任何时候删除属性都可以
		4. $forceUpdate() 强制更新
		5. $destroy() 销毁
	</script>
</html>
